<template>
  <!--  供应商对账-->
  <div class="salesMargin">
    <jc-title />
    <!--    <div class="header">-->
    <!--      <el-button-->
    <!--        class="btn1"-->
    <!--        type="primary"-->
    <!--        size="mini"-->
    <!--        @click="handleExport"-->
    <!--      >-->
    <!--        导出Excel-->
    <!--      </el-button>-->
    <!--    </div>-->
    <div class="table-content">
      <jc-table
        :table-data="tableData"
        :table-header="tableHeader"
        :table-height="tableHeight"
      >
        <!--        <el-table-column :label="$t('shop.numIndex')" type="index" align="center" />-->
        <el-table-column label="2022年1月集团各部门成本费用汇总报表" align="center">
          <template slot="header">
            <el-date-picker
              v-model="value1"
              type="month"
              value-format="yyyy-MM"
              :placeholder="$t('market.checkDate')"
              @change="value2=value1"
            />
            集团各部门成本费用汇总报表
          </template>
          <el-table-column label="独立核算部门" prop="fdeaprt" align="center" width="100" />
          <el-table-column label="2022年1月初库存" prop="" align="center">
            <template slot="header">
              <el-date-picker
                v-model="value2"
                type="month"
                value-format="yyyy-MM"
                :placeholder="$t('market.checkDate')"
              />月初库存
            </template>
          </el-table-column>
          <el-table-column label="营业额" prop="" align="center" />
          <el-table-column label="出厂价产值" prop="" align="center" />
          <el-table-column label="料工费合计" prop="" align="center" />
          <el-table-column label="料工费合计比率" prop="" align="center" />
        </el-table-column>
        <el-table-column label="材料领用" align="center">
          <el-table-column label="订单标准用料金额" prop="" align="center" />
          <el-table-column label="订单实际领料金额" prop="" align="center" />
          <el-table-column label="差额" prop="" align="center" />
          <el-table-column label="材料占比率" prop="" align="center" />
          <el-table-column label="五金" prop="" align="center" />
          <el-table-column label="海绵" prop="" align="center" />
          <el-table-column label="面料" prop="" align="center" />
          <el-table-column label="外协加工" prop="" align="center" />
          <el-table-column label="木材座板" prop="" align="center" />
          <el-table-column label="包装材料" prop="" align="center" />
          <el-table-column label="玻璃岩板" prop="" align="center" />
          <el-table-column :label="$t('market.other')" prop="" align="center" />
        </el-table-column>
        <el-table-column label="工资明细" align="center">
          <el-table-column label="订单标准计件工资金额" prop="" align="center" />
          <el-table-column label="实际产生计件工资金额" prop="" align="center" />
          <el-table-column label="计件人数" prop="" align="center" />
          <el-table-column label="月薪定编人员工资" prop="" align="center" />
          <el-table-column label="月薪实际发放工资" prop="" align="center" />
          <el-table-column label="月薪人数" prop="" align="center" />
          <el-table-column label="承包线工资" prop="" align="center" />
          <el-table-column label="临时人工及额外费用 " prop="" align="center" />
          <el-table-column label="工资合计" prop="" align="center" />
          <el-table-column label="工资占出厂比" prop="" align="center" />
        </el-table-column>
        <el-table-column label="费用类别" align="center">
          <el-table-column label="每月房租" prop="" align="center" />
          <el-table-column label="船务+报关费+运输" prop="" align="center" />
          <el-table-column label="水电" prop="" align="center" />
          <el-table-column label="员工福利合计" prop="" align="center" />
          <el-table-column label="业务招待费" prop="" align="center" />
          <el-table-column label="车辆费用" prop="" align="center" />
          <el-table-column label="差旅费" prop="" align="center" />
          <el-table-column label="折旧/摊销费" prop="" align="center" />
          <el-table-column label="模具工具" prop="" align="center" />
          <el-table-column label="质量罚款+补件" prop="" align="center" />
          <el-table-column label="仓储费" prop="" align="center" />
          <el-table-column label="运输费" prop="" align="center" />
          <el-table-column label="展会费用/宣传费" prop="" align="center" />
          <el-table-column label="办公费+设备维修费" prop="" align="center" />
          <el-table-column label="咨询、审计保险费用" prop="" align="center" />
          <el-table-column label="销售佣金" prop="" align="center" />
          <el-table-column :label="$t('market.other')" prop="" align="center" />
          <el-table-column label="资金占用利息" prop="" align="center" />
          <el-table-column label="焊丝气体劳保材耗1.7%" prop="" align="center" />
          <el-table-column label="税负" prop="" align="center" />
          <el-table-column label="基建费用" prop="" align="center" />
          <el-table-column label="标准费用合计" prop="" align="center" />
          <el-table-column label="实际产生费用合计" prop="" align="center" />
          <el-table-column label="差额" prop="" align="center" />
        </el-table-column>
        <el-table-column label="利润报表" align="center">
          <el-table-column label="费用比率" prop="" align="center" />
          <el-table-column label="退税13%" prop="" align="center" />
          <el-table-column label="部门利润" prop="" align="center" />
          <el-table-column label="总利润" prop="" align="center" />
          <el-table-column label="毛利率" prop="" align="center" />
        </el-table-column>
        <el-table-column label="本月部门经营异常分析说明" prop="" align="center" />
        <el-table-column label="处理结果" prop="" align="center" />
      </jc-table>
    </div>
    <!--    分页器-->
    <div class="footer">
      <jc-pagination
        v-show="total > 0"
        :total="total"
        :page.sync="currentPage"
        :limit.sync="size"
        @pagination="getData"
      />
    </div>
  </div>
</template>

<script>
import { InStockInfo_info } from '@/api/financial/reconciliation'
import { export_json_to_excel, formatJson } from '@/utils/Export2Excel'

export default {
  name: 'CostSummary',
  components: {
    // filtration
  },
  data() {
    return {
      value1: '',
      value2: '',
      total: 0, // 总条目
      currentPage: 1, // 当前页
      size: 200, // 每页显示多少条数据
      tableHeight: '500px',
      // 表头
      tableData: [
        { fdeaprt: '软体部' }, { fdeaprt: '五金部' }, { fdeaprt: '岩板木器部' }, { fdeaprt: '承包线' }, { fdeaprt: '研发中心' },
        { fdeaprt: '摩洛哥沙发部' }, { fdeaprt: '摩洛哥沙发部' }, { fdeaprt: '摩洛哥五金部' }, { fdeaprt: '摩洛哥餐台部' },
        { fdeaprt: '供应链采购部' }, { fdeaprt: '外销' }, { fdeaprt: '内销' }, { fdeaprt: '外销+内销' },
        { fdeaprt: '总部销售部' }, { fdeaprt: '集团总部' }
      ], // 销售数据
      tableHeader: [],
      tableHeader1: []
    }
  },
  created() {
    // this.getData()
    const year = new Date().getFullYear()
    const month = new Date().getMonth() + 1
    this.value1 = year + '-' + month
    this.value2 = this.value1
    this.tableHeader1 = this.tableHeader
  },
  methods: {
    // 导出表格
    handleExport() {
      require.ensure([], () => {
        const tHeader = this.tableHeader.map(res => {
          return res.label
        })
        const filterVal = this.tableHeader.map(res => {
          return res.prop
        })
        if (this.tableData.length <= 0) {
          this.$message.warning('没有导出数据')
        } else {
          InStockInfo_info({
            pageSize: 100000,
            pageNum: 1,
            ...this.searInput
          }).then(res => {
            if (res.code === 0) {
              const list = res.data
              const data = formatJson(filterVal, list)
              export_json_to_excel(tHeader, data, '部门成本费用汇总报表')
            } else {
              this.$confirm(res.message, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'error'
              })
            }
          })
        }
      })
    },
    // 获取销售毛利列表数据
    async getData(ev) {
      this.details = []
      if (ev && !ev.page) {
        this.details = ev
      }
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        ...this.searInput
      }
      const { data: res, code, total } = await InStockInfo_info(DATA)
      if (code !== 0) {
        this.$message.warning('获取数据失败，请选择日期后搜索重试！')
        return
      }
      this.tableData = res
      this.total = total
    },
    // 搜索
    handleQuery(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.customHandle(ev)
        this.getData(ev.detail)
      } else {
        this.getData()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.salesMargin {
  @include listBom;
  padding: 0;
  .active{
    border-radius: 3px;
    box-shadow: 0 0 3px #1e9fff;
  }
  .el-table::v-deep th > .cell {
    white-space: break-spaces;
  }
  .el-table::v-deep .el-input__icon {
    line-height: 30px;
    display: none;
  }
  .el-table::v-deep .el-input--prefix .el-input__inner {
    padding-left: 5px;
  }
  .el-table::v-deep .el-input--suffix .el-input__inner {
    padding-right: 0;
  }
  .el-table::v-deep .el-date-editor.el-input,.el-input__inner {
    width: 80px;
  }
  .el-icon-remove-outline{
    cursor: pointer;
    color: #1e9fff;
    margin-left: 2.26vw;
    padding-top: 0.46vh;
  }
  .header {
    position: relative;
    margin-bottom: 10px;
    .search {
      position: absolute;
      top: 0;
      width: 20.4vw;
      background: #fff;
      padding: 5px;
      z-index: 10;
      .searInt {
        width: 180px;
        margin: 0 10px;
      }

      /** 左侧宽度 */
      &::v-deep .el-input.el-input--mini.el-input--suffix {
        width: 8vw
      }
      /** 右侧宽度 */
      .selectStus::v-deep .el-input.el-input--mini.el-input--suffix{
        width: 185px;
      }
      .el-date-editor--datetimerange.el-input__inner{
        width: 185px;
      }
    }
    .btn {
      transform: translateY(32%);
      margin-left: 21.3vw;
    }
    .btn1 {
      transform: translateY(32%);
    }
    .hang {
      margin-bottom: 5px;
    }
    .posit{
      position: absolute;
      top: 1.12vh;
      right: 0.624vw;
      i{
        font-size: 14px;
        color: #737577;
      }
      .el-icon-d-arrow-left{
        transform: rotate(90deg);
      }
      .el-icon-d-arrow-right{
        transform: rotate(90deg);
      }
    }
    .posit:hover{
      box-shadow: 0 0 0.052vw #aaa;
    }
    .newSear{
      cursor: pointer;
      font-size: 12px;
      color: #409EFF;
      margin-bottom: 10px;
    }
  }
}
</style>
